import React, { Component } from 'react'
// import { SearchBar,Icon } from 'antd-mobile';
import "./SearchContent.scss"
// import axios from "axios"
import fetchjsonp from "fetch-jsonp"
import Left from "./images/left.png"
import ls from "./images/ls.png"
import xx from "./images/xx.png"
import delet from "./images/deldete.png"

export default class SearchContent extends Component {

    constructor(props) {
        super()
        // console.log(props)
        this.state = {
            name: [],
            Hot:[]
        }
    }
    componentWillMount() {
        fetchjsonp("https://list.mogu.com/module/mget?code=sketch%2ChotWord&platform=H5&_=1600740486117").then(res=>{
            // console.log(res)
            return res.json()
        }).then(val=>{
            // console.log(val.data.hotWord.data)
            this.setState({
                Hot:val.data.hotWord.data
            })
        })
        
        var myList = window.localStorage.getItem('myList')
        if (myList == null || myList === '') {
            myList = [];
        } else {
            myList = myList.split(',')
        }
        this.setState({
            name: myList
        })
    }
    //refs
    todoonclick = () => {
        let name = this.refs.inputmy.value
        this.setState({
            name: name===""?"":[...this.state.name, name]
        }, () => {
            if(name===""){

            }else{
                window.localStorage.setItem('myList', this.state.name)
            }
        })
        this.refs.inputmy.value = '';
        setTimeout(()=>{
            this.props.history.push("./detailss")
        },0)

    }
     Hoponclick=(e) => {
        let Hotext=e.target.getAttribute("data-index")
        console.log(this.state.name.length)
        this.setState({
            name: [...this.state.name, Hotext]
        }, () => {
            window.localStorage.setItem('myList', this.state.name)
        })
        this.refs.inputmy.value = Hotext;
        setTimeout(()=>{
            this.props.history.push("./detailss")
        },0)
    }
    historyonclick=(e) => {
        let historyonclick=e.target.getAttribute("data-index")
        console.log(historyonclick)
        this.refs.inputmy.value = historyonclick;
        setTimeout(()=>{
            this.props.history.push("./detailss")
        },0)
    }
    
    
    render() {
        return (
            <div className="SearchContent">
                {/* 搜索栏开始 */}
                <div className="SearchContent-nav">
                    <div className="nav-left" onClick={() => window.history.go(-1)}><img  className="nav-left-i" src={Left} alt=""></img></div>
                    <div className="nav-rigth">
                        <input className="nav-right-bar" type='text' onKeyDown={(e) => { if (e.keyCode === 13) { this.todoonclick() } }} ref='inputmy'></input>
                        {/* <span className="nav-right-dele">X</span> */}
                        <span className="nav-right-go" onClick={this.todoonclick}>搜索</span>
                    </div>
                </div>
                {/* 搜索栏结束 */}
                {/* 历史记录开始 */}
                <div className="SearchContent-history">
                    <div className="history-top"><img className="history-top-ls" src={ls} alt=""></img>历史记录<img onClick={() => {
                        window.localStorage.removeItem('myList')
                        this.setState({
                            name: []
                        })
                    }} className="history-top-delete" src={delet} alt=""></img></div>
                    <div>{!this.state.name.length == 0 ? <div>{this.state.name.map((v, i) => {
                        return (
                            <div className="history-top-true" key={i} onClick={this.historyonclick} data-index={v}>{v}</div>
                        )
                    })}</div> : <div className="history-top-false">暂无历史记录</div>}
                    </div>
                </div>
                {/* 历史记录结束 */}
                {/* 热门搜索开始 */}
                <div className="SearchContent-Hot">
                    <div className="history-top"><img className="history-top-xx" src={xx} alt=""></img>热门搜索</div>
                    {this.state.Hot.map((v,i)=>{
                        return (
                        <div onClick={this.Hoponclick} key={i} className="history-Hot" style={{color:v.color}} data-index={v.query}>{v.query}</div>
                        )
                    })}
                </div>
                {/* 热门搜索结束 */}
            </div>
        )
    }
}